<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>文章密码</title>
    <meta charset="utf-8"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no minimal-ui">
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css?v=3.3.7}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/font-awesome.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/blog/auth/css/material-design-iconic-font.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/blog/auth/css/util.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/blog/auth/css/main.css}">

    <style>
        .div_show {
            display: block;
            text-align: left;
        }

        .div_hide {
            display: none;
        }
    </style>
</head>
<body>

<div class="limiter">
    <div class="container-login100">
        <div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-54">
            <form method="GET" id="form" class="login100-form validate-form">
                <span style="text-align:center ; display:block; color: red"
                      th:if="${not #strings.isEmpty(mtoPost) && not #strings.isEmpty(mtoPost.title) }"
                      th:text="${mtoPost.title}"></span>
                <span class="login100-form-title p-b-49">该页面已加密</span>
                <div class="wrap-input100 validate-input" data-validate="请输入密码">
                    <span class="label-input100"></span>

                    <input class="input100" type="password" id="ZiYuanPro.Com" name="articlePwd" placeholder="请输入密码">
                    <span class="focus-input100" data-symbol=""></span>
                </div>

                <div class="text-right p-t-8 p-b-10">
                    <a href="javascript:;" onclick="showInfo()">如何获取密码？</a>
                </div>

                <div class="container-blog-login-form-btn">
                    <div class="wrap-blog-login-form-btn">
                        <div class="blog-login-form-bgbtn"></div>
                        <!--                        <span class="blog-login-form-btn"  id="article-auth">立即进入</span>-->
                        <button type="submit" class="blog-login-form-btn">立即进入</button>
                        <!--                        <script>setTimeout(function() {document.getElementById(layer.tips('警告：密码错误！请访问ZiYuanPro.Com获取密码！','#fancypig', {tips: [1, '#ec4848'],time: 9000}))}, 30);</script>-->
            </form>
        </div>
    </div>

    <div class="flex-col-c p-t-25">
        <a href="/blog" class="txt2">返回首页</a>
    </div>

</div>
</div>
</div>
<script th:src="@{/js/jquery.min.js?v=3.6.3}"></script>
<script type="text/javascript">

    var input = $('.validate-input .input100');

    $('.validate-form').on('submit', function () {
        var check = true;

        for (var i = 0; i < input.length; i++) {
            if (validate(input[i]) == false) {
                showValidate(input[i]);
                check = false;
            }
        }

        return check;
    });


    $('.validate-form .input100').each(function () {
        $(this).focus(function () {
            hideValidate(this);
        });
    });

    function validate(input) {
        if ($(input).attr('type') == 'email' || $(input).attr('name') == 'email') {
            if ($(input).val().trim().match(/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/) == null) {
                return false;
            }
        } else {
            if ($(input).val().trim() == '') {
                return false;
            }
        }
    }

    function showValidate(input) {
        var thisAlert = $(input).parent();
        $(thisAlert).addClass('alert-validate');
    }

    function hideValidate(input) {
        var thisAlert = $(input).parent();
        $(thisAlert).removeClass('alert-validate');
    }

    /**
     * 如何获取密码
     */
    function showInfo() {
        console.log("点击了如何获取密码");
    }

</script>

</body>
</html>
